<template>
  <div class="container ranking">
      <Header />
      <div class="main">
        <h2>{{$t("index.ranking")}}</h2>
        <ol>
          <li>{{$t("index.player")}}</li>
          <li>{{$t("index.earning")}}</li>
        </ol>
        <ul>
          <li v-for="(item,index) in rankingList" :key="index">
            <div>
              <img src="../../assets/img/first.png" alt="" v-if="index===0">
              <img src="../../assets/img/second.png" alt="" v-else-if="index===1">
              <img src="../../assets/img/third.png" alt="" v-else-if="index===2">
              <span style="fontSize:.13rem" v-else>{{index}}</span>
              <div>
                <i></i>
                <span>{{item.username}}</span>
              </div>
            </div>
            <div>
              {{item.profit.toFixed(6)}} WSC
            </div>
          </li>
        </ul>
      </div>
  </div>
</template>

<script>
import Header from '../../components/Header.vue';
export default {
  components:{
    Header
  },
  data(){
    return{
      rankingList:[
        {
          username:"cwvwrtbwbw",
          profit:3.5000
        },
        {
          username:"cwvwrtbwbw",
          profit:3.5000
        },
        {
          username:"cwvwrtbwbw",
          profit:3.5000
        },
        {
          username:"cwvwrtbwbw",
          profit:3.5000
        },
        {
          username:"cwvwrtbwbw",
          profit:3.5000
        },
        {
          username:"cwvwrtbwbw",
          profit:3.5000
        },
        {
          username:"cwvwrtbwbw",
          profit:3.5000
        },
        {
          username:"cwvwrtbwbw",
          profit:3.5000
        },
        {
          username:"cwvwrtbwbw",
          profit:3.5000
        },
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.ranking{
  .main{
    h2{
      font-size: .267rem;
      padding: 0 .16rem;
    }
    >ol{
      display: flex;
      padding: 0.05rem .84rem;
      justify-content: space-between;
      font-size: .13rem;
      margin-top: .3rem;
      border-bottom: solid .005rem #283E4F;
    }
    >ul{
      padding-top: .12rem;
      font-size: .12rem;
      li{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 .15rem;
        padding-right: .4rem;
        margin: 0 .15rem;
        height: .4rem;
        >div{
          display: flex;
          >span,>img{
            margin-right: .16rem;
            width: .167rem;
            text-align: center;
          }
          >img{
            height: .21rem;
            width: .167rem;
            
          }
          >div{
            display: flex;
            align-items: center;
            i{
              display: block;
              margin-top: .03rem;
              height: .167rem;
              width: .167rem;
              background: #000;
              border-radius: 50%;
              margin-right: .06rem;
            }
          }
        }
      }
      >li:nth-of-type(odd){
        background: #283E4F;
      }
    }
  }
}
</style>